<template>
    <!--  项目容器  -->
    <div class="app">
        <!-- 电影搜索栏 -->
        <navBar></navBar>
        <!-- 首页正文 -->
        <!-- <Home></Home> -->
        <div class="content-box">
            <transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutLeft">
                <keep-alive>
                    <component :is="page" @update:page="getPage"></component>
                </keep-alive>
            </transition>
        </div>
        <!-- 评论区 -->
        <transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutLeft">
            <bottomBar v-show="page=='FilmDetail'"></bottomBar>
        </transition>
    </div>
</template>

<script>
import navBar from "./components/navBar";
import Home from "./views/home";
import Film from "./views/film";
import FilmDetail from "./views/filmDetail";
import bottomBar from "./components/bottomBar";
export default {
    name: "app",
    components: {
        Home,
        Film,
        navBar,
        FilmDetail,
        bottomBar
    },
    data() {
        return {
            page: "Home",
            // page: "Film",
            // page: "FilmDetail"
            filmId: 0
        };
    },
    methods: {
        getPage(arg) {
            this.page = arg;
        }
    },
    beforeMount() {
        this.$root.$on("update:detail", (arg, page) => {
            this.page = page;
            this.filmId = arg;
        });
        // console.log(this.$root);
        this.$api.loadTypes();
    }
};
</script>

<style lang="less" >
// @import "./less/var.less";
@import "./less/besetic.less";
</style>
<style lang="less" scoped>
// @import "./less/var.less";
/*Chrome下隐藏滚动条，溢出可以透明滚动*/
// ::-webkit-scrollbar{
//     width:0px
// }
.app {
    max-width: 750px;
    margin: 0 auto;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: @light;
    overflow: hidden;
}
.content-box {
    background-color: #cccccc;
    position: absolute;
    top: @topHeight;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
}
</style>
